"use client";

import { EditMoonCard } from "./EditMoonCard";
import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableFooter,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination"
import { DeleteMoonCard } from './DeleteMoonCard';
import { MoonCardType } from "@/types/book";
import { useSearchParams } from "next/navigation";
import { ReviewMoonCard } from "./ReviewMoonCard";

type MoonCardListProps = {
  moonCards: MoonCardType[];
  total: number;
}

export const MoonCardList = ({ moonCards, total }: MoonCardListProps) => {
  const searchParams = useSearchParams()
  const offset = Number(searchParams.get('offset')) || 1
  const limit = Number(searchParams.get('limit')) || 10
  let leftEllipsis = true
  let rightEllipsis = true
  let pageList: number[] = []
  const totalPage = Math.ceil(total / limit)
  if (offset <= 2) {
    pageList = [1,2,3]
    leftEllipsis = false
  } else if (offset > totalPage - 2) {
    pageList = [totalPage - 2, totalPage - 1, totalPage]
    rightEllipsis = false
  } else {
    pageList = [offset - 1, offset, offset + 1]
  }

  return (
    <Table className="bg-white border rounded-lg mt-4">
        <TableCaption>《答案之书》，宛若一位神秘的占卜师，静候于时光的一隅，以简短而富有深意的词句，为迷茫的心灵指引方向。它不以确定性的答案束缚你，而是以一种温柔而坚定的力量，鼓励你在混沌中寻找光明，在犹豫中迈出步伐。每一次翻阅，都是一次自我发现的旅程，它教会我们，在生活的十字路口，即使前路未卜，也要勇于做出选择，因为正是这些选择，塑造了独一无二的我们。</TableCaption>
        <TableHeader>
          <TableRow>
            <TableHead className="w-[100px]">id</TableHead>
            <TableHead>名称</TableHead>
            <TableHead>英文名</TableHead>
            <TableHead>时刻</TableHead>
            <TableHead>备注</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {moonCards.map((invoice) => (
            <TableRow key={invoice.id}>
              <TableCell className="font-medium">{invoice.id}</TableCell>
              <TableCell>{invoice.name}</TableCell>
              <TableCell>{invoice.englishName}</TableCell>
              <TableCell>{invoice.time}</TableCell>
              <TableCell>
                <div className='flex items-center'>
                  <EditMoonCard type='edit' item={invoice} />
                  <DeleteMoonCard item={invoice} />
                  <ReviewMoonCard item={invoice} />
                </div>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
        <TableFooter>
          <TableRow>
            <TableCell colSpan={1}>总数：{total}</TableCell>
            <TableCell colSpan={4}>
              <Pagination className="justify-end">
                <PaginationContent>
                  {
                    offset > 1 && (<>
                      <PaginationItem>
                        <PaginationLink href={`?offset=${1}&limit=${limit}`}>
                          首页
                        </PaginationLink>
                      </PaginationItem>
                      <PaginationItem>
                        <PaginationPrevious href={`?offset=${offset-1}&limit=${limit}`} />
                      </PaginationItem>
                    </>
                    )
                  }
                  {
                    leftEllipsis && (
                      <PaginationItem>
                        <PaginationEllipsis />
                      </PaginationItem>
                    )
                  }
                  {
                    pageList.map((page) => (
                      <PaginationItem key={page}>
                        <PaginationLink href={`?offset=${page}&limit=${limit}`} isActive={page === offset}>
                          {page}
                        </PaginationLink>
                      </PaginationItem>
                    ))
                  }
                  {
                    rightEllipsis && (
                      <PaginationItem>
                        <PaginationEllipsis />
                      </PaginationItem>
                    )
                  }
                  {
                    offset < totalPage && (
                      <>
                        <PaginationItem>
                          <PaginationNext href={`?offset=${offset+1}&limit=${limit}`} />
                        </PaginationItem>
                        <PaginationItem>
                          <PaginationLink href={`?offset=${totalPage}&limit=${limit}`}>
                            尾页
                          </PaginationLink>
                        </PaginationItem>
                      </>
                    )
                  }
                </PaginationContent>
              </Pagination>
            </TableCell>
          </TableRow>
        </TableFooter>
      </Table>
      
  );
} 